@import '@/styles/index.scss';

.container {
    
  .extension-page {
    width: 100%;

    .nav {
      position: fixed;
      top: 0;
      left: 0;
      display: flex;
      width: 100%;
      background-color: $bgc;
      z-index: 99;
  
      .item {
        flex: 1;
        padding: 20rpx 0;
        line-height: 50rpx;
        font-size: $fsm;
        color: $fc;
        text-align: center;
        cursor: pointer;
  
        &.on {
          background-color: $fc-on;
          color: #fff;
        }
      }
    }

    .body {
      padding-top: 90rpx;
      padding-bottom: $pd;

      .wrapper {
        display: none;

        &.on {
          display: block;
        }

        .list {
    
          .item {
            position: relative;
            display: flex;
            align-items: center;
            padding: 20rpx $pd;
            border-bottom: 2rpx solid $bdc;
    
            .avatar {
              width: 120rpx;
              height: 120rpx;
    
              .image {
                display: block;
                width: 100%;
                height: 100%;
              }
            }
    
            .user {
              flex: 1;
              padding-left: $pd;
              overflow: hidden;
              text-overflow:ellipsis;
              white-space: nowrap;
    
              .nick {
                margin-bottom: 10rpx;
                width: 100%;
                margin-bottom: 10rpx;
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
              }
    
              .job {
                color: $fc-t;
                font-size: $fss;
              }
            }
    
            .content {
              flex: 1;
              overflow: hidden;
              text-overflow:ellipsis;
              white-space: nowrap;
  
              .icon {
                display: inline-block;
                vertical-align: top;
                width: 40rpx;
                height: 40rpx;
  
                .image {
                  display: block;
                  width: 100%;
                  height: 100%;
                }
              }
  
              .text {
                display: inline-block;
                vertical-align: top;
              }
            }
          }
        }
      }
    }
  }
}